<template>
	<view class="css-page">
		<!-- <uv-navbar bgColor="#ffffff" titleStyle="color:#000000;font-size:14px;" leftIcon="arrow-left" :autoBack="true"
			:title="navbarTitle" safeAreaInsetTop fixed placeholder></uv-navbar> -->
		<view class="css-margin css-bg-white" style="padding-bottom:5px;border-radius: 10px;">
			<view class="css-flex-x css-align-center css-justify-between">
				<view class="css-flex-x css-align-center">
					<view class="css-padding">
						<uv-icon
							customStyle="background-color:#fa3534;color:#FFFFFF;padding:5px 5px;border-radius: 5000rpx;"
							custom-prefix="icon icon-lt" :size="35"></uv-icon>
					</view>
					<view class=""><text>{{data.city}}{{data.operator}}</text></view>
				</view>
				<view class="css-bg-gray css-margin-right-sm buyer-swiper">
					<view :class="{ top: animate == true }">
						<view class="list" v-for="(buyer,index) in data.swiperBuyer">
							<view>
								<uv-avatar size="36" :src="serverHost+buyer.m"></uv-avatar>
							</view>
							<view>
								<text class="css-text-sm css-text-gray">{{buyer.x}}</text>
								<text class="css-text-sm css-text-gray css-padding-left-sm">{{buyer.t}}分钟前已</text>
								<text class="css-text-sm css-text-red">实名下单</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="css-bg-red" style="margin-top:-20px;border-radius: 10px;">
			<view class="">
				<view class="css-padding-left css-padding-tb-lg">
					<view class="css-flex-x css-align-center css-justify-between">
						<view class="css-flex-x css-align-center">
							<template v-if="!isEmpty(data.colors)">
								<text :style="listNumberStyle(sn.c)" v-for="(sn,si) in data.colors" :key="si">
									{{sn.s}}
								</text>
							</template>
							<template v-else>
								<text class="css-text-bold css-text-xxl">
									{{data.number}}
								</text>
							</template>
						</view>
						<view class="css-bg-white css-padding-tb-sm"
							style="margin-right:-10px;border-radius: 20px 0rpx 0rpx 20px" @click="copyIt(number)">
							<text class="css-padding-lr css-text-bold css-text-red">复制号码</text>
						</view>
					</view>
					<view class="css-flex-x css-align-center css-margin-top">
						<text>{{city}}</text>
						<text>{{data.operator}}</text>
						<view style="border-color: #FFFFFF;" class="css-text-white css-radius uv-border css-margin-left"
							v-if="!isEmpty(data.symbol)">
							<text class="css-padding-sm">{{data.symbol}}</text>
						</view>
					</view>
				</view>
				<template v-if="!isEmpty(data.goods_point)">
					<view class="css-margin-top">
						<uv-gap height="3" bgColor="#c0c4cc"></uv-gap>
					</view>
					<view class="css-padding-top css-padding-bottom-lg css-padding-left">
						<text class="css-text-df" style="color: hsla(0,0%,100%,.7)">{{data.goods_point}}</text>
					</view>
				</template>
			</view>
		</view>

		<view class="css-margin-top-sm css-margin-bottom css-radius-xl css-margin-lr-sm css-bg-white css-padding">
			<view class="css-flex-x css-align-center css-justify-between css-padding-tb-sm">
				<view class="css-flex-x css-align-center">
					<view>
						<!-- <text class="css-text-red css-text-xl css-text-bold">￥{{data.sale_price || 0}}</text> -->
						<text class="css-text-red css-text-xl css-text-bold">￥{{0}}</text>
					</view>
					<view v-if="!isEmpty(data.pre_money)">
						<text class="css-text-gray css-text-lg">(话费:￥{{data.pre_money}} 元需另存)</text>
					</view>
				</view>
				<view><text class="css-text-df css-text-gray">{{data.carts}}人已加入购物车</text></view>
			</view>
			<view class="css-flex-x css-align-center css-justify-between css-padding-tb-sm">
				<view><text class="css-text-bold css-text-xl css-text-gray">套餐信息</text></view>
				<view>
					<uv-text type="info" size="20"  :text="data.in_name" suffixIcon="arrow-down"
						iconStyle="font-size: 18px"></uv-text>
				</view>
			</view>
			<view class="css-flex-x css-align-center css-justify-between css-padding-tb-sm">
				<view><text class="css-text-bold css-text-xl css-text-gray">送货方式</text></view>
				<view><text class="css-text-xl">快递送货 · 包邮到家</text></view>
			</view>
			<view class="css-flex-x css-align-center css-justify-between css-padding-tb-sm">
				<view><text class="css-text-bold css-text-xl css-text-gray">安心保障</text></view>
				<view><text class="css-text-xl">官方正品 · 售后保障</text></view>
			</view>
		</view>

		<uv-sticky zIndex="2" customNavHeight="45" offset-top="0">
			<view
				class="main-tab css-bg-white css-flex-x css-align-center css-justify-between css-margin-bottom css-margin-lr-sm">
				<view class="main-tab__item" :class="nowTabIndex==0?'main-tab__item__selected':''" @tap="switchTab(0)">
					<view class="main-tab__item-bg"></view>
					<view class="main-tab__item-text"><text>入网信息</text></view>
				</view>
				<view class="main-tab__item" :class="nowTabIndex==1?'main-tab__item__selected':''" @tap="switchTab(1)">
					<view class="main-tab__item-bg"></view>
					<view class="main-tab__item-text"><text>套餐信息</text></view>
				</view>
				<view class="main-tab__item" :class="nowTabIndex==2?'main-tab__item__selected':''" @tap="switchTab(2)">
					<view class="main-tab__item-bg"></view>
					<view class="main-tab__item-text"><text>办理须知</text></view>
				</view>
			</view>
		</uv-sticky>
		<view class="css-padding-tb">
			<view class="main-tab-split"></view>
		</view>
		<view id="tabbox-0"
			class="css-bg-white css-flex-x css-align-center css-justify-between css-margin-tb css-margin-lr-sm css-radius-lg css-padding">
			<uv-form labelPosition="left" labelWidth="100" :model="form" :rules="rules" ref="form">
				<view class="css-flex-x css-align-center css-justify-between css-padding-tb-sm">
					<view class="css-flex-sub">
						<uv-text prefixIcon="account" iconStyle="font-size: 20px" bold text="填写收货信息"></uv-text>
					</view>
					<!-- <view class="css-flex-sub">
						<uv-button text="选择常用地址" type="error" plain size="small"
							@click="dumpPage('pages/address/index',{select:1})"></uv-button>
					</view> -->
				</view>
				<view>
					<uv-form-item label="办理人姓名:" prop="contact_name">
						<uv-input v-model="form.contact_name" @input="inputContactName" placeholder="请输入办理人姓名"
							border="surround" />
					</uv-form-item>
					<uv-form-item label="联系电话:" prop="pay_phone">
						<uv-input v-model="form.pay_phone" placeholder="请输入有效联系电话并保持畅通" border="surround" />
					</uv-form-item>
					<!-- 					<uv-form-item label="办理人身份证:" prop="pay_identity">
						<uv-input v-model="form.pay_identity" placeholder="请输入办理人身份证号码" border="surround" />
					</uv-form-item> -->


				</view>
				<view>
					<uv-form-item label="省市区:" prop="city">
						<uv-input prefixIcon="home" placeholder="请选择收货省/市/区" border="surround" readonly
							:value="form.province+' '+form.city+ ' '+form.area">
							<template v-slot:suffix>
								<uv-button text="选择省/市/区" type="success" size="mini" @click="openAddres()"></uv-button>
							</template>
						</uv-input>
					</uv-form-item>
					<uv-form-item label="镇/街道:" prop="address">
						<uv-input v-model="form.address" border="surround" />
					</uv-form-item>
				</view>
				<!-- <view class="css-flex-x css-align-center css-justify-between">
					<uv-text prefixIcon="account" iconStyle="font-size: 20px" bold text="预约入网信息"></uv-text>
				</view> -->

			</uv-form>
		</view>
		<view class="css-flex-x css-justify-start css-align-start css-margin-top-lg css-margin-lr-sm">
			<view>
				<uv-checkbox-group @change="agreementChange" shape='square'>
					<uv-checkbox name="1" :checked="agreement"></uv-checkbox>
				</uv-checkbox-group>
			</view>
			<view>
				<view class="css-flex-x css-justify-start css-align-center css-flex-wrap">
					<text class="css-text-df">我已阅读并同意平台</text>
					<text class="css-text-df css-text-blue"
						@tap="dumpPage('pages/regulations/index',{type:'xhHgsc'})">《合规使用手机卡告知书》</text>

					<text class="css-padding-left-sm css-text-df css-text-blue"
						@tap="dumpPage('pages/regulations/index',{type:'xhKhxs'})">《关于客户个人信息收集、使用及保护的公告》</text>

					<text class="css-padding-left-sm css-text-df css-text-blue"
						@tap="dumpPage('pages/regulations/index',{type:'xhKhrw'})">《客户入网服务协议及业务协议》</text>

					<text class="css-padding-left-sm css-text-df css-text-blue"
						@tap="dumpPage('pages/regulations/index',{type:'xhFwcl'})">《服务承诺》</text>

					<text class="css-padding-left-sm css-text-df css-text-blue"
						@tap="dumpPage('pages/regulations/index',{type:'xhXhzc'})">《送货政策》</text>
				</view>
			</view>

		</view>
		<view class="css-margin-top-sm css-margin-lr-sm" v-if="data.booking==1">
			<text class="css-text-grey">{{bookingTips}}</text>

		</view>
		<view id="tabbox-1"></view>
		<view id="tabbox-2" class="css-margin-top-sm css-margin-lr-sm">
			<view v-for="(pic,index) in buyTipsPic" :key="index">
				<image :src="pic" :style="[{'width':smBoxWidth+'px'}]"></image>
			</view>
			<uv-parse :content="data.goods_detail"></uv-parse>
		</view>
		<uv-popup ref="popupIntention" zIndex="100" :safeAreaInsetTop="true"
			:customStyle="{'height':'100vh','padding-top':'100px','background-color':'#FFFFFF'}"
			:overlayStyle="{background:'#f3f5f7'}">

			<view class="css-margin-lr-sm css-margin-top css-bg-gray css-radius-xxl css-padding">
				<view>
					<view class="css-flex-x css-align-center css-padding-tb">
						<text class="css-text-black">已选择</text>
						<text class="css-text-yellow">{{data.in_name}}</text>
					</view>
					<view class="css-flex-x css-align-center css-justify-between">
						<view class="css-flex-x css-align-center css-text-center">
							<template v-if="!isEmpty(data.colors)">
								<text :style="listNumberStyleSubmit(sn.c)" v-for="(sn,si) in data.colors" :key="si">
									{{sn.s}}
								</text>
							</template>
							<template v-else>
								<text class="css-text-bold css-text-xxl">
									{{data.number}}
								</text>
							</template>
						</view>
					</view>
					<view class="css-flex-x css-align-center css-justify-between css-padding-tb">
						<view>
							<text>{{city}}</text>
							<text>{{data.operator}}</text>
						</view>
						<view>
							<text>话费:￥{{data.pre_money || 0}}元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="css-margin-top css-padding css-bg-white css-flex-x css-justify-start css-align-center">
				<view>
					<uv-icon name="map" size="30" color="error"></uv-icon>
				</view>
				<view class="css-padding-left-sm">
					<view>
						<text class="css-text-xl css-text-bold css-text-black">{{form.contact_name}}</text>
						<text class="css-padding-left css-text-df css-text-black">{{form.pay_phone}}</text>
					</view>
					<view class="css-text-bold">
						<text class="css-text-df css-text-black">{{form.province}}</text>
						<text class="css-text-df css-text-black">{{form.city}}</text>
						<text class="css-text-df css-text-black">{{form.area}}</text>
						<text class="css-text-df css-text-black">{{form.address}}</text>
					</view>
				</view>
			</view>
			<view class="css-margin-lr-sm css-margin-top css-bg-white css-radius-xxl css-padding">
				<view>
					<text class="css-text-bold css-text-lg">
						根据国家实名制要求,请提供正确的身份信息
					</text>
					<view class="css-flex-x css-justify-between css-align-center css-margin-top">
						<view class="css-flex-sub"><text>办理人姓名:</text></view>
						<view class="css-flex-twice"><uv-input v-model="form.pay_name" placeholder="请输入办理人姓名"
								border="surround" /></view>
					</view>
					<view class="css-flex-x css-justify-between css-align-center css-margin-top">
						<view class="css-flex-sub"><text>办理人身份证:</text></view>
						<view class="css-flex-twice">
							<uv-input v-model="form.pay_identity" placeholder="请输入办理人身份证号码" border="surround" />
						</view>
					</view>
				</view>
			</view>
			<view>
				<uv-button type="error" text="立即提交" @click="sureBuy()"></uv-button>
			</view>
			<view class="css-margin-tb-xl">
				<uv-button type="info" text="返回修改信息" @click="closePopupIntention()"></uv-button>
			</view>
		</uv-popup>
		<!-- 预约成功显示 -->
		<uv-popup ref="popupBookingSuccess" :overlayStyle="{background:'#39b54a'}"
			:customStyle="{'padding-top':'44px'}">
			<view class="css-bg-green">
				<view class="css-bg-white css-padding css-text-center"><text
						class="css-text-bold css-text-black css-text-xl">预约成功通知</text>
				</view>
				<view class="css-margin-lr">
					<view class="css-bg-green css-padding-tb-xl">
						<uv-text prefixIcon="checkmark-circle" align="center" bold color="#FFFFFF"
							iconStyle="font-size: 28px;color:#FFFFFF" size="28" text="您已下单成功"></uv-text>

					</view>
					<view class="css-margin-top css-bg-white css-padding css-radius-xl">

						<view class="css-margin-tb-xl css-flex-x css-justify-start css-align-center">
							<view>
								<uv-text prefixIcon="checkmark-circle-fill" align="center" bold
									iconStyle="color:#5AE82E;font-size: 22px;" size="22" text="订单已提交成功"></uv-text>
							</view>
							<view class="css-margin-left">
								<uv-button size="mini" type="success" text="已完成"></uv-button>
							</view>
						</view>
						<view class="css-margin-tb-xl css-flex-x css-justify-start css-align-center">
							<view>
								<uv-text prefixIcon="checkmark-circle-fill" align="center" bold
									iconStyle="color:#5AE82E;font-size: 22px;" size="22" text="订单正在审核发货"></uv-text>
							</view>
							<view class="css-margin-left">
								<uv-button size="mini" type="warning" text="审核中"></uv-button>
							</view>
						</view>
						<!-- <view class="css-margin-tb-xl css-flex-x css-justify-start css-align-center">
							<view>
								<uv-text prefixIcon="checkmark-circle-fill" align="center" bold
									iconStyle="font-size: 22px;" size="22" text="关注公众号"></uv-text>
							</view>
							<view class="css-margin-left">
								<uv-button size="mini" type="error" text="未完成"></uv-button>
							</view>
						</view> -->
						<view class="css-margin-tb-xl css-flex-x css-justify-start css-align-center">
							<view>
								<uv-text prefixIcon="checkmark-circle-fill" align="center" bold
									iconStyle="font-size: 22px;" size="22" text="激活号码"></uv-text>
							</view>
							<view class="css-margin-left">
								<uv-button size="mini" type="error" text="未完成"></uv-button>
							</view>
						</view>
						<!-- <view class="css-margin-tb-xl" @tap="copyOffical(data.offical)">
							<view class="res-btn res-btn-search css-text-center">
								<text class="css-text-white css-text-xl">关注公众号</text>
							</view>
						</view> -->
						<view class=" css-margin-tb-xl css-flex-x css-justify-center css-align-center">
							<view class="css-margin-right" @click="dumpPage('pages/goods/index')">
								<text class="css-text-gray css-text-df">继续选号>></text>
							</view>

							<view class="css-margin-left" @click="dumpPage('pages/order/index',{},'launch')">
								<text class="css-text-black css-text-df">查看订单>></text>
							</view>
						</view>
						<view>
							<image mode="widthFix" :src="serverHost+'/static/xh/guide.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popupCopyOfficalSuccess">
			<view>
				<view>
					<image mode="widthFix" :src="serverHost+'/static/xh/follow.png'"></image>
				</view>
				<view class="css-margin-top css-text-center"><text
						class="css-text-black css-text-xl css-text-bold">公众号已复制</text></view>
				<view class="css-margin-tb css-text-center"><text
						class="css-text-black css-text-xl css-text-bold">打开微信搜索关注</text>
				</view>
				<view class="css-flex-y css-align-center css-padding-bottom">
					<view class="follow-btn">
						<text>马上关注</text>
					</view>
				</view>
			</view>
		</uv-popup>
		<cu-address ref="pickerAddress" :province="form.province" :city="form.city" :area="form.area"
			@onConfirm="confirmAddres"></cu-address>
		<view class="css-bg-white" style="position: fixed;z-index: 99;bottom:0px;width:100vw">
			<view class="css-padding css-flex-x css-justify-between css-align-center">
				<view class="css-flex-x css-justify-start css-align-center">
					<text class="css-text-red">合计:</text>
					<!-- <uv-text type="error" mode="price" bold size="30" :text="data.sale_price || 0"></uv-text> -->
					<uv-text type="error" mode="price" bold size="30" :text="0"></uv-text>
				</view>
				<view>
					<uv-button type="error" :text="data.booking==1?'立即预约':'立即购买'"
						@click="openPopupIntention()"></uv-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbarTitle: '号码预约',
				smBoxWidth: uni.screenWidth,
				nowTabIndex: 0,
				animate: false,
				timer: null,
				goodsId: 0,
				number: '',
				fromApi: 0,
				nm: '',
				province: '',
				city: '',
				price: 0,
				snList: [],
				data: [],
				serverHost: '',
				agreement: true,
				bookingTips: '',
				buyTipsPic: [],
				form: {
					contact_name: undefined,
					pay_name: undefined,
					pay_phone: undefined,
					pay_identity: undefined,
					province: '',
					city: '',
					area: '',
					address: '',
					addressId: undefined
				},
				rules: {
					contact_name: [{
						required: true,
						message: '收货人姓名为必填字段',
						trigger: ['blur', 'change']
					}],
					pay_name: [{
						required: true,
						message: '办理人姓名为必填字段',
						trigger: ['blur', 'change']
					}],
					pay_phone: [{
						required: true,
						message: '办理人电话为必填字段',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							// 返回true表校验通过，返回false表示不通过
							return uni.$uv.test.mobile(value)
						},
						message: '办理人电话格式错误',
						trigger: ['blur', 'change']
					}],
					pay_identity: [{
						required: true,
						message: '办理人身份证号为必填字段',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							// 返回true表校验通过，返回false表示不通过
							return uni.$uv.test.idCard(value)
						},
						message: '身份证号格式错误',
						trigger: ['blur', 'change']
					}],
					city: [{
						required: true,
						message: '请选择收货省市区信息',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '收货镇/街道/门牌号为必填字段',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		onShow() {
			let nowApp = getApp();
			// console.log(nowApp)
			if (true === uni.$uv.getProperty(nowApp, 'globalData.reInit')) {
				getApp().globalData.reInit = false;
				console.log('重新执行init');
				this.init();
			}
		},
		onUnload() {
			clearInterval(this.timer);
		},
		onLoad(options) {
			options = options || {};
			this.goodsId = options.goodsId || 0
			this.number = options.number || ''
			this.id = options.id || 0
			this.fromApi = options.fromApi || 0
			this.nm = options.nm || ''
			this.province = options.province || ''
			this.city = options.city || ''

			this.price = options.price || 0
			this.serverHost = uni.$my.serverHost
			this.smBoxWidth = uni.$my.boxWidth('css-margin-lr-sm')
			this.splitNumber()
			this.init()
		},
		computed: {

		},
		methods: {
			isEmpty(item) {
				return uni.$uv.test.empty(item)
			},
			getProperty(obj, key) {
				return uni.$uv.getProperty(obj, key);
			},
			dumpPage(page, params, type) {
				uni.$my.dumpPage(page, params, type)
			},
			agreementChange(e) {
				// console.log(e)
				this.agreement = !this.agreement;
			},
			listNumberStyle(c) {

				let color = '#c8c8c8'
				if (c === 1) {
					color = '#ffffff'
				} else if (c === 2) {
					color = '#fff596'
				}
				return `color:${color};font-size:30px`

			},
			listNumberStyleSubmit(c) {
				let color = '#c8c8c8'
				if (c === 1) {
					color = '#000000'
				} else if (c === 2) {
					color = '#ff0036'
				}
				return `color:${color};font-size:30px`

			},
			splitNumber() {
				if (!this.isEmpty(this.nm)) {
					let tmp = this.number.split(this.nm)
					this.snList = [tmp[0], this.nm, tmp[1]]
				} else {
					this.snList = [this.number]
				}
			},
			init() {
				uni.$uv.http.get('/goods/buy', {
					params: {
						id: this.id,
						goodsId: this.goodsId,
						number: this.number,
						fromApi: this.fromApi
					}
				}).then(res => {
					console.log(res,4444444444);
					if (res.code === 200) {
						if (!this.isEmpty(res.data.goods_detail)) {
							res.data.goods_detail = decodeURIComponent(res.data.goods_detail)
						}
						if (!this.isEmpty(res.data.goods_remark)) {
							res.data.goods_remark = decodeURIComponent(res.data.goods_remark)
						}
						this.bookingTips = res.bookingTips
						this.buyTipsPic = res.buyTipsPic || []
						this.data = res.data
						this.timer = setInterval(this.scrollBuyer, 4500);
						this.saveHistory(this.data)
					}
					// console.log(this.adpic)
				}).catch(e => {
					console.log(e)
				})
			},
			saveHistory(data) {
				// console.log(data,4444444444);
				if (this.isEmpty(data.number)) {
					return
				}
				
				let item = {
					'id': data.id || 0,
					'goods_id': data.goods_id || '',
					'number': data.number,
					'from_api': this.fromApi,
					'colors': data.colors,
					'operator': data.operator || '',
					'province': data.province || '',
					'city': data.city || '',
					'symbol': data.symbol || '',
					'pre_money': data.pre_money || 0,
					'in_name':data.in_name || '',
				}
				uni.$my.addHistorys(item.number, item).then(result => {
					if (result) {
						console.log("浏览痕迹已保存")
					}
				}).catch(err => {
					// console.log(err)
				})
			},
			inputContactName(value) {
				this.form.pay_name = value
				// console.log(value)
			},
			scrollBuyer() {
				this.animate = true;
				setTimeout(() => {
					this.data.swiperBuyer.push(this.data.swiperBuyer[0]);
					this.data.swiperBuyer.shift();
					this.animate = false;
				}, 1000);
			},
			openAddres() {
				this.$refs.pickerAddress.open();
			},
			confirmAddres(res) {
				// console.log(res)
				this.form.province = res.names[0]
				this.form.city = res.names[1]
				this.form.area = res.names[2]
			},
			setAddress(item) {
				// console.log(item)
				if (this.isEmpty(this.form.pay_name)) {
					this.form.pay_name = item.name
				}
				if (this.isEmpty(this.form.contact_name)) {
					this.form.contact_name = item.name
				}
				if (this.isEmpty(this.form.pay_phone)) {
					this.form.pay_phone = item.phone
				}
				this.form.province = item.province
				this.form.city = item.city
				this.form.area = item.area
				this.form.address = item.address
				this.form.addressId = item.id
			},
			openPopupBookingSuccess() {
				this.$refs.popupBookingSuccess.open('top');
			},
			openPopupIntention() {
				this.$refs.form.validate().then(res => {
					this.$refs.popupIntention.open('top');
				}).catch(errors => {
					// console.log(errors)
					uni.showToast({
						icon: 'error',
						title: '数据校验失败'
					})
				})
			},
			closePopupIntention() {
				this.$refs.popupIntention.close();
			},
			sureBuy() {
				uni.$uv.throttle(this.sureBuyThrottle(), 1500)
			},
			sureBuyThrottle() {
				let postData = this.form
				postData.phonesId = this.id
				postData.goodsId = this.goodsId
				postData.number = this.number
				postData.fromApi = this.fromApi
				postData.numberProvince = this.province
				postData.numberCity = this.city
				uni.$uv.http.post('/orders/buy', postData).then(res => {
					if (res.code === 200) {
						//下单成功,是支付还是跳到预约成功页
						if (this.data.booking == 1) {
							this.closePopupIntention()
							this.openPopupBookingSuccess()
						} else {
							// 跳转到下单支付页
							uni.showToast({
								icon: 'none',
								title: res.msg,
								complete: () => {
									this.dumpPage('pages/orders/pay', {
										ordersno: res.order_num
									}, 'launch')
								}
							})
						}
					} else {
						uni.showModal({
							title: '购买提示',
							content: res.msg,
							showCancel: false
						});
					}
				}).catch(error => {

				})
			},
			copyIt(txt) {
				uni.$my.copyIt(txt).then(res => {
					uni.showToast({
						title: '内容已复制',
						icon: 'none'
					})
				}).catch(e => {

				})
			},
			copyOffical(txt) {
				uni.$my.copyIt(txt).then(res => {
					this.$refs.popupCopyOfficalSuccess.open('center');
				}).catch(e => {

				})
			},
			switchTab(index) {
				let boxId = `tabbox-${index}`
				this.nowTabIndex = index
				uni.createSelectorQuery().select('#' + boxId).boundingClientRect((rect) => {
					// 使用scrollIntoView方法滚动到目标元素
					uni.pageScrollTo({
						scrollTop: rect.top,
						duration: 300
					})
				}).exec();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buyer-swiper {
		height: 45px;
		overflow: hidden;
		padding-left: 5px;
		padding-right: 5px;
		border-radius: 5px;
	}

	.list {
		height: 45px;
		display: flex;
		align-items: center;
		font-size: 16rpx;
	}

	.top {
		transition: all 1.5s;
		margin-top: -100px;
	}

	.main-tab {
		align-items: flex-end;
		background: #f5f7f9;
		display: flex;
		height: 60px;
		overflow: hidden
	}

	.main-tab__item {
		background: #ededed;
		border-radius: 15px 15px 0 0;
		flex: 1;
		flex-shrink: 0;
		height: 50px;
		line-height: 50px;
		position: relative;
		text-align: center
	}

	.main-tab__item-text {
		color: #888888;
		padding: 5px;
		position: relative;
		white-space: nowrap;
		z-index: 1
	}

	.main-tab__item-text .icon {
		display: none;
		font-size: 20px;
		margin-right: 5px
	}

	.main-tab__item__selected {
		background-color: transparent;
		position: relative;
		top: -12px
	}

	.main-tab__item__selected .main-tab__item-bg {
		background: #ffffff;
		border-radius: 20px 20px 0 0;
		height: 60px;
		left: -1%;
		position: absolute;
		top: 5px;
		transform: perspective(40px) rotateX(10deg);
		width: 105%;
		z-index: 1
	}

	.main-tab__item__selected .main-tab__item-text {
		color: #333333;
		font-weight: 600;
		top: .19rem
	}

	.main-tab__item__selected .main-tab__item-text .icon {
		display: inline-block
	}

	.main-tab__item__selected .main-tab__item-text:after {
		background: #fb3534;
		border-radius: 3px;
		bottom: 3px;
		content: "";
		display: block;
		height: 2px;
		left: 50%;
		position: absolute;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 50px
	}

	.main-tab.fixed {
		left: .24rem;
		position: fixed;
		right: .24rem;
		top: 1rem;
		z-index: 99
	}


	.main-tab-split {
		background: linear-gradient(-45deg, transparent, transparent 6px, #e7524f 0, #e7524f 20px, transparent 0), linear-gradient(-45deg, transparent, transparent 31px, #6e80f7 0, #6e80f7 45px, transparent 0);
		background-size: 70px;
		height: 3px;
		left: 3px;
		position: absolute;
		width: 100%
	}

	.res-btn {
		border-radius: .8rem;
		box-shadow: 1px 1px 3px #d8d8d8;
		box-sizing: border-box;
		display: block;
		font-size: 20px;
		height: 66px;
		line-height: 66px;
		width: 100%
	}

	.res-btn-search {
		background-image: url(https://s.haoma.com/zfbmp/order-result/btn-bg.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		border: none;
		border-radius: 0;
		box-shadow: none;
		color: #ffffff;
		font-size: .36rem;
		height: 66px;
		letter-spacing: 2px;
		line-height: 66px;
		margin-bottom: .2rem;
		margin-left: -.1rem;
		position: relative;
		width: calc(100% + .2rem)
	}

	@-webkit-keyframes scale1 {
		0% {
			-webkit-transform: scale(3);
			transform: scale(3)
		}

		50% {
			-webkit-transform: scale(3.1);
			transform: scale(3.1)
		}

		to {
			-webkit-transform: scale(3);
			transform: scale(3)
		}
	}

	@keyframes scale1 {
		0% {
			-webkit-transform: scale(3);
			transform: scale(3)
		}

		50% {
			-webkit-transform: scale(3.1);
			transform: scale(3.1)
		}

		to {
			-webkit-transform: scale(3);
			transform: scale(3)
		}
	}

	.res-btn-search:after {
		-webkit-animation: scale1 1s infinite;
		animation: scale1 1s infinite;
		background-image: url(https://s.haoma.com/zfbmp/order-result/hand.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		content: "";
		display: block;
		height: 1rem;
		position: absolute;
		right: 20px;
		top: 30px;
		width: 1rem
	}

	.follow-btn {
		background-image: url(https://s.haoma.com/zfbmp/order-result/btn-bg.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% auto;
		border: none;
		border-radius: 0;
		box-shadow: none;
		color: #ffffff;
		font-size: 18px;
		height: 60px;
		letter-spacing: 2px;
		line-height: 60px;
		margin-bottom: .2rem;
		margin-left: -.1rem;
		position: relative;
		text-align: center;
		width: 80%
	}
</style>